{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>电商图书</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
    <style>
        .nav_item, .content, .navbar-brand {
            margin: 0 20px;
        }

        #message {
            margin: 10px 5px;
        }

        .form-control {
            height: 30px;
            width: 100%;
        }

        .btn {
            margin: 5px 0;
            font-size: 10px;
        }

        .add {
            margin-left: 5px;
            width: 60px;
            height: 30px;
        }

        .top {
            display: flex;
            justify-content: space-between;
        }

        .right {
            margin: 10px 5px;
        }

        .zanwu {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            margin-top: 100px;
        }

        td, th {
            text-align: center;
            align-items: center;
        }

        .com {
            margin: 10px 5px;
            text-decoration: none;
            color: #7f7f7f;
        }

        .comment {
            display: flex;
            justify-content: center;
            align-items: center;
            border: 1px solid #ccc;
        }

        .book {
            display: flex;
            flex-direction: column;
            margin-right: 10px;
            border-right: 1px solid #ccc;
        }

        .book1 {
            width: 50px;
            height: 100px;
            margin: 10px 10px;
            border: 2px solid #ccc;
            box-shadow: 4px 2px 2px rgba(0, 0, 0, 0.5);
        }

        .text {
            margin: 10px 10px;
        }

        .content1 {
            display: flex;
            margin-left: 50px;
        }

        .content2 {
            display: flex;
            flex-direction: column;
            color: #7f7f7f;
        }

        .content2 span {
            margin: 5px 0;
        }

        .books {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .book .image {
            margin-right: 10px;
        }
    </style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light nav-justified">
    <a class="navbar-brand" href="#">豆瓣读书</a>
    <div class="collapse navbar-collapse nav_item" id="navbarNav">
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" href="/admin/message/">图书爬取</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="/admin/account/">图书管理</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="/admin/comment/">图书评论</a>
            </li>
        </ul>
    </div>
</nav>
<div class="content">
    {% block content %}

    {% endblock %}
</div>

<script>

    // 获取所有具有.nav-link类的列表项
    const navLinks = document.querySelectorAll(".nav-link");

    // 监听每个导航链接的点击事件
    navLinks.forEach(function (link) {
        link.addEventListener("click", function () {
            // 移除所有导航链接的active类名
            navLinks.forEach(function (link) {
                link.classList.remove("active");
            });

            // 给当前导航链接添加active类名
            this.classList.add("active");
        });
    });

    window.addEventListener("DOM", function () {
        const navList = document.getElementsByClassName("nav-item")
        const firstNavlink = navList.querySelector(".nav-link")
        firstNavlink.classList.add("active")
    })

</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-/mhDoLbDldZc3qpsJHpLogda//BVZbgYuw6kof4u2FrCedxOtgRZDTHgHUhOCVim"
        crossorigin="anonymous"></script>
</body>
</html>